<template>
    <div class="singer">
      <div class="singer_bg">
        <span>万千歌手 尽在眼前</span>
      </div>
      <div class="singer_type">
        <ul class="type_ul">
          <li>
            <ul class="type_theme_detail">
              <li :class="{select:current.index===i}" @click="currentIndex(i)" v-for="(item,i) in tags.index" :key="i">{{item.name}}</li>
            </ul>
          </li>
          <li>
            <ul class="type_theme_detail">
              <li :class="{select:current.areaIndex===i}" @click="currentArea(i)" v-for="(item,i) in tags.area" :key="i">{{item.name}}</li>
            </ul>
          </li>
          <li>
            <ul class="type_theme_detail">
              <li :class="{select:current.sexIndex===i}" @click="currentSex(i)" v-for="(item,i) in tags.sex" :key="i">{{item.name}}</li>
            </ul>
          </li>
          <li>
            <ul class="type_theme_detail">
              <li :class="{select:current.genreIndex===i}" @click="currentGenre(i)" v-for="(item,i) in tags.genre" :key="i">{{item.name}}</li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="singer_list">
        <ul class="list_ul">
          <li v-for="(item,index) in singerList">
            <img :src="item.singer_avatar" alt="" v-if="index<10&&current.index===0" @click="toSingerDetail(item.singer_mid)">
            <span class="ellipsis" @click="toSingerDetail(item.singer_mid)">{{item.singer_name}}</span>
          </li>
        </ul>
      </div>
      <!--
        父传子组件 total,page
        子传父组件 currentChange
      -->
      <Pagination :total="singer.total" :page="current.page" :size="80" @currentChange="currentChange" v-show="singer.total>80"></Pagination>
    </div>
</template>

<script>
    import Pagination from '@/components/Pagination/Pagination'
    import {mapState} from 'vuex'
    let that={};
    export default {
        name: "Singer",
        data(){
          return{
            tags:{},
            current:{
                index:0,
                areaIndex:0,
                sexIndex:0,
                genreIndex:0,
                page:1
            },
            singerList:[]
          }
        },
        methods:{
          currentIndex(i){
            this.current.index=i;
            this.current.page=1;
          },
          currentArea(i){
            this.current.areaIndex=i;
            this.current.page=1;
          },
          currentSex(i){
            this.current.sexIndex=i;
            this.current.page=1;
          },
          currentGenre(i){
            this.current.genreIndex=i;
            this.current.page=1;
          },
          currentChange(data){//data表示子向父传递的方法的参数
           this.current.page=data;
          },
          toSingerDetail(mid){
            this.$router.replace(`/singerdetail/${mid}`);
          }
        },
        computed:{
          ...mapState(['singer']),
        },
        mounted(){
          that=this;
          this.$store.dispatch('getSingerList',{area:-100,sex:-100,genre:-100,index:-100,sin:0,cur_page:1})
        },
        watch:{
          singer(value){
            this.tags=value.tags;
            this.singerList=value.list;
          },
          current: { //若直接监听current，则无反应，而我们要监听的是current的下层内容
            handler:(value)=> {
              //用that代替this，因为这里的this并不是我们所要的this
              // console.log(that);
              // do something
              // console.log(value.page);
              that.$store.dispatch('getSingerList',{
                area:that.tags.area[value.areaIndex].id,
                sex:that.tags.sex[value.sexIndex].id,
                genre:that.tags.genre[value.genreIndex].id,
                index:that.tags.index[value.index].id,
                sin:(value.page-1)*80,
                cur_page:value.page
              })
              // console.log(value.page);
            },
            deep: true

          },
        },
        components:{
          Pagination
        }

    }
</script>

<style scoped lang="less">
.singer{
  .singer_bg{
    width: 100%;
    height: 376px;
    background: url("./images/singer_bg.jpg") no-repeat;
    text-align: center;
    padding-top: 103px;
    box-sizing: border-box;
    >span{
      font-size: 60px;
      color: white;
    }
  }
  .singer_type{
    width: 1200px;
    margin: 0px auto 15px;
    background: #fefefe;
    padding: 34px 40px;
    box-sizing: border-box;
    ul {
      li{
        display: inline-block;
      }
    }
   .type_ul{
     >li{
       width: 1200px;
       position: relative;
       margin-bottom: 17px;
       height: 40px;
       line-height: 40px;
       .type_theme_detail {
         margin-left: 80px;
         li{
           padding:0px 15px;
           font-size: 14px;
           &:first-child {
             position: absolute;
             left: 0px;
             top:0px;
           }
           &:hover{
             color: #31c27c;
             cursor: pointer;
           }
           &.select{
             background-color: #31c27c;
             color: white;
           }
         }
       }
     }
   }
  }
  .singer_list{
    width: 1200px;
    margin: 0 auto;
    .list_ul{
      li{
        display: inline-block;
        text-align: left;
        width: 236px;
        margin-bottom: 25px;
        >img{
          display: block;
          width: 140px;
          height: 140px;
          border-radius: 50%;
          margin: 0 auto 20px;
        }
        span{
          display: block;
          text-align: center;
          &:hover{
            color: #31c27c;
            cursor: pointer;
          }
        }

      }
    }


  }
}
</style>
<style>
  .el-pagination{
    text-align: center;
    margin-bottom: 20px}
  .el-pagination /deep/ button{
    height: 50px;
    width: 48px;
    line-height: 50px;
  }
  .el-pagination /deep/ .el-pager .number{
    height: 50px;
    width: 48px;
    line-height: 50px;
  }
  .el-pagination /deep/ .el-pager .number:hover{
    color: #31c27c !important;
  }
  .el-pagination.is-background /deep/.el-pager li:not(.disabled).active {
    background: #31c27c;
    color: #FFF;
  }
  .el-pagination.is-background /deep/ .el-icon{
    height: 50px;
    width: 48px;
    line-height: 50px;
  }
</style>
